<template>
  <div ref="chart" id="map3" style="width: 100%;height: 100%;"></div>
</template>

<script>
import * as echarts from "echarts"
export default {
name: "lineChart",
  data(){
    return {

    }
  },
  mounted() {
    this.setMap()
  },
  methods:{
    setMap(){
      let myChart = echarts.init(this.$refs.chart)
      const  option = {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'bar',
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.2)'
            }
          }
        ]
      }
      myChart.setOption(option)
        
        //第二种
   
      // this.$nextTick(() => {
      //   let map2 = echarts.init(document.getElementById('map3'))
      //   this.chart2 = map2
      //   map2.setOption( {
      //     xAxis: {
      //       type: 'category',
      //       data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      //     },
      //     yAxis: {
      //       type: 'value'
      //     },
      //     series: [
      //       {
      //         data: [120, 200, 150, 80, 70, 110, 130],
      //         type: 'bar',
      //         showBackground: true,
      //         backgroundStyle: {
      //           color: 'rgba(180, 180, 180, 0.2)'
      //         }
      //       }
      //     ]
      //   })
      // })
    }
  }
}
</script>

<style scoped>

</style>
